<template>
  <div class='container'>
    <el-card class="box-card">
      <!--      Header-->
      <div>
        <el-col :span="16">
          <el-row>
            目录名称
            <el-input class="input" v-model="inputKey"></el-input>
            <el-button @click="clearInput">清除</el-button>
            <el-button type="primary" @click="searchSubject">搜索</el-button>
          </el-row>
        </el-col>
        <el-col :span="8">
          <el-row type="flex" justify="end">
            <el-button type="success" icon="el-icon-edit" @click="addSubject">新增学科</el-button>
          </el-row>
        </el-col>
      </div>
      <!--      提示消息-->
      <Alert :total="total"/>
      <!--      表格-->
      <el-table :data="subjectList" :header-cell-style="headClass" style="width: 100%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="subjectName" label="学科名称" width="200"></el-table-column>
        <el-table-column prop="username" label="创建者"></el-table-column>
        <el-table-column prop="addDate" label="创建时间" width="240">
          <template v-slot="{row}">{{ row.addDate | parseTimeByString }}</template>
        </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示">
          <template v-slot="{row}">{{ row.isFrontDisplay | isShow }}</template>
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录"></el-table-column>
        <el-table-column prop="tags" label="标签"></el-table-column>
        <el-table-column prop="totals" label="题目数量"></el-table-column>
        <el-table-column prop="address" label="操作" width="250px">
          <template v-slot="{row}">
            <!--           {{row}}-->
            <el-button type="text" @click="$router.push(
             {path: '/subjects/directorys', query:{id:row.id,name:row.subjectName}}
           )">学科分类
            </el-button>
            <el-button type="text" @click="$router.push(
               {path: '/subjects/tags', query:{id:row.id,name:row.subjectName}}
           )">学科标签
            </el-button>
            <el-button type="text" @click="editSubject(row)">修改</el-button>
            <el-button type="text" @click="delSubject(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--      分页-->
      <el-row type="flex" justify="end">
        <el-pagination
          background
          layout=" sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10,15,20,25]"
          :page-size="pagesize"
          :total="total">
        </el-pagination>
      </el-row>
    </el-card>
    <!--      新增和修改学科弹框-->
    <el-dialog :title="`${changeText}学科`" :visible.sync="dialogFormVisible" @close="btnCancel" width="400px">
      <el-form :model="form" :rules="rules" ref="formRef" label-width="80px">
        <el-form-item label="学科名称" prop="subjectName">
          <el-input v-model="form.subjectName" autocomplete="off" style="{width: 180px}"></el-input>
        </el-form-item>
        <el-form-item label="是否显示" prop="isFrontDisplay">
          <el-switch
            v-model="form.isFrontDisplay"
            active-value="1"
            inactive-value="0"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="btnCancel">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import Alert from '@/components/Alert'
import { add, list, remove, update } from '@/api/hmmm/subjects'

export default {
  components: {
    Alert
  },
  data () {
    return {
      form: {
        subjectName: '',
        isFrontDisplay: '1',
        id: ''
      },
      rules: {
        subjectName: [
          {
            required: true,
            message: '请输入学科名称',
            trigger: 'blur'
          }
        ]
      },
      dialogFormVisible: false,
      page: 1, // 当前页
      pagesize: 10, // 每页条数
      total: 1, // 数据总数
      inputKey: '',
      subjectList: [{
        subjectName: '',
        username: '',
        addDate: '',
        isFrontDisplay: '',
        twoLevelDirectory: '',
        tags: '',
        totals: ''
      }]
    }
  },
  filters: {
    isShow (isFrontDisplay) {
      return isFrontDisplay === 1 ? '是' : '否'
    }
  },
  computed: {
    isEdit () {
      return !!this.form.id
    },
    changeText () {
      return this.isEdit ? '修改' : '新增'
    }
  },
  //  渲染数据
  created () {
    this.getSubjectList()
  },
  methods: {
    // 监听每页多少条
    handleSizeChange (val) {
      this.pagesize = val
      this.getSubjectList()
    },
    // 监听页码值改变
    handleCurrentChange (val) {
      this.page = val
      this.getSubjectList()
    },
    // 添加
    addSubject () {
      this.dialogFormVisible = true
    },
    // 修改
    editSubject (row) {
      this.dialogFormVisible = true
      this.form.subjectName = row.subjectName
      this.form.id = row.id
      this.form.isFrontDisplay = row.isFrontDisplay.toString()
    },
    // 点击确定时
    async btnOk () {
      await this.$refs.formRef.validate()
      if (this.isEdit) {
        // 修改学科
        await update(this.form)
        await this.getSubjectList()
      } else {
        // 添加学科
        await add(this.form)
        // console.log(this.form.isFrontDisplay)
        await this.getSubjectList()
      }
      this.$message.success(`${this.changeText}成功`)
      this.btnCancel()
    },
    // 关闭
    btnCancel () {
      this.dialogFormVisible = false
      this.form = {
        subjectName: '',
        isFrontDisplay: ''
      }
    },
    headClass () {
      return 'background:#fafafa; height:50px; border-bottom:2px solid #E8E8EA'
    },
    //  获取学科列表
    async getSubjectList () {
      const { data } = await list({
        page: this.page,
        pagesize: this.pagesize,
        subjectName: this.inputKey
      })
      console.log(data)
      this.page = parseInt(data.page)
      this.pagesize = parseInt(data.pagesize)
      this.total = data.counts
      this.subjectList = data.items
    },
    // 搜索
    searchSubject () {
      this.getSubjectList()
    },
    // 清除
    clearInput () {
      this.inputKey = ''
      this.getSubjectList()
    },
    //  删除
    async delSubject (row) {
      try {
        await this.$confirm('您确定删除该学科吗', '提示', { type: 'warning' })
        await remove(row)
        await this.getSubjectList()
        this.$message.success('删除成功')
      } catch (e) {
        this.$message.error('删除失败')
      }
    }
  }
}
</script>

<style scoped lang='less'></style>
